// {/** WorkShow: 首页home展示部分作品 */}
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Grid } from '@alifd/next';
import ScrollAnim from 'rc-scroll-anim';
import QueueAnim from 'rc-queue-anim';
import IceEllipsis from '@icedesign/ellipsis';

const { Row, Col } = Grid;
const ScrollOverPack = ScrollAnim.OverPack;

class StarCategory extends PureComponent {
  static displayName = 'StarCategory';
  static propTypes = {};
  static defaultProps = {};

  render() {
    const { workShowList } = this.props;
    return (
      <div style={styles.container}>
        <ScrollOverPack always={false}>
          <QueueAnim type="bottom" delay={100} duration={1000}>
            <div style={styles.content} key="content">
              <Row wrap gutter={20}>
                {workShowList.map((item, index) => {
                  return (
                    <Col xxs="24" s="6" l="6" key={index}>
                      <Link to={'/partner/id=' + item.get('id')}>
                        <div style={styles.item}>
                          <div style={styles.head}>
                            <IceEllipsis style={styles.title} lineLimit={1} text={item.get('title')} />
                          </div>
                          <div style={styles.info}>
                            <p style={styles.author}>作者：{item.get('author')}</p>
                            <p style={styles.description}> 
                              <IceEllipsis lineLimit={5} text={item.get('desc')} />
                            </p>
                          </div>
                        </div>
                      </Link>
                    </Col>
                  );
                })}
              </Row>
            </div>
          </QueueAnim>
        </ScrollOverPack>
      </div>
    );
  }
}

const styles = {
  container: {
    minHeight: '466px',
    padding: '50px 0',
    background: '#fff',
  },
  content: {
    margin: '0 auto',
  },
  mainTitle: {
    fontSize: '50px',
    color: '#cc9933',
    letterSpacing: '0.77px',
    lineHeight: '72px',
    margin: '0',
    fontWeight: '700',
  },
  item: {
    background: '#FAFAFA',
    borderRadius: '6px',
    paddingBottom: '50px',
    marginBottom: '20px',
  },
  head: {
    padding: '30px 0',
    background: '#366',
    textAlign: 'center',
    color: '#fff',
    borderRadius: '6px 6px 0 0',
  },
  title: {
    margin: '0 0 5px',
    fontWeight: 'bold',
    fontSize: '20px',
  },
  author: {
    margin: 0,
    fontWeight: 'bold',
    fontSize: '15px',
    color: '#366',
  },
  info: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: '40px',
  },
  image: {
    width: '52px',
    height: '52px',
  },
  type: {
    margin: 0,
    fontSize: '15px',
    fontWeight: 'bold',
    marginTop: '10px',
  },
  description: {
    margin: '20px 0',
    lineHeight: '22px',
    textAlign: 'center',
    width: '60%',
    color: '#999',
  },
};

const mapState = (state) => ({
  workShowList: state.getIn(['home', 'workShowList'])
});

export default connect(mapState, null)(StarCategory);